<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title></title>
    <script type="text/javascript">
		window.onload=function(){
			size=document.body.clientWidth/40;
			document.getElementsByTagName("html")[0].style.fontSize=size+"px";
			
		
			var z10 = document.getElementById("z10");
		var page1 = document.getElementById("p-1");
		var page2 = document.getElementById("p-2");
		var page3 = document.getElementById("p-3");
		z10.addEventListener("touchstart",function(){
		setTimeout(function(){
			page1.style.display = "none";
			page2.style.display = "block";
			},3000);
		page1.setAttribute("class","p1-2");
	},false);
			var video = document.getElementById("v");
			var bnl = document.getElementById("p2");
			
			bnl.addEventListener("touchstart",function(){
				video.style.display = "block";
				video.play();
			},false);
			video.addEventListener("ended",function(){
			page1.style.display = "none";
			page2.style.display = "none";
			page3.style.display = "block";
			},false);
			
			var can=document.getElementById("zuo");
			can.width=document.body.clientWidth;
			can.height=document.body.clientHeight;
			
			var snowx=new Array();
			var snowy=new Array();
			var fontSize=new Array();
			for(var i=0;i<100;i++)
			{
				snowx[i]=Math.random()*can.width;
				snowy[i]=-1*Math.random()*can.height;
				fontSize[i]=Math.random()*10+10;
			}
			var context = can.getContext("2d");
			context.fillStyle="aqua";


		
			var speedx=5;
			var speedy=5;
			setInterval(function(){context.clearRect(0,0,can.width,can.height);
				for(var i = 0 ; i <80 ; i++){
					snowy[i] = snowy[i] + speedy ;
					if(snowy[i]>can.height){
						snowy[i] = -1*Math.random()*can.height;
					} 
					context.font = fontSize[i]+"px arial";
					context.fillText("*",snowx[i],snowy[i]);
				
			}
				
			},50)
		var can1=document.getElementById("can1");
			can1.width=document.body.clientWidth;
			can1.height=document.body.clientHeight;
			
			var snowx1=new Array();
			var snowy1=new Array();
			var fontSize1=new Array();
			for(var i=0;i<100;i++)
			{
				snowx1[i]=Math.random()*can1.width;
				snowy1[i]=-1*Math.random()*can1.height;
				fontSize1[i]=Math.random()*15+10;
			}
			var context1 = can1.getContext("2d");
			context1.fillStyle="#FF0000";


		
			var speedx1=5;
			var speedy1=5;
			setInterval(function(){context1.clearRect(0,0,can.width,can.height);
				for(var i = 0 ; i <50 ; i++){
					snowy1[i] = snowy1[i] + speedy1 ;
					if(snowy1[i]>can1.height){
						snowy1[i] = -1*Math.random()*can1.height;
					} 
					context1.font = fontSize1[i]+"px arial";
					context1.fillText("福",snowx1[i],snowy1[i]);
				
			}
				
			},50)
			var dl = document.getElementById("z17");

			var player = document.getElementById("player");
			dl.addEventListener("touchstart", function() {
				if(player.paused) {
					player.play();
					} else {
					player.pause();
				}
	}, false);
		}
		
		
	</script>
	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	}
    	html,body{
    		height: 100%;
    		width: 100%;
    	}
    	.p-1{
    		background:url(img/psd2464_0024_图层-1.png);
    		width: 100%;
    		height: 100%;
    		background-size: contain;
    		display: block;
    		
    		}
    		@keyframes pa1{
			from{
				opacity: 1;
			}
			to{
				opacity: 0.2;
				}
			}
    		
    		.p1-2{
    			width: 100%;
				height: 100%;
				background:url(img/psd2464_0024_图层-1.png);
				background-size: contain;
				animation: pa1 3s;
    		}
    		
    	#hua{
    			position: absolute;
    			top: 0;
    			background: url(img/psd2464_0016_图层-44.png);
    			width: 25.49683544303797rem;
    			height: 10.121137206427689rem;
    			background-size: contain;
    			background-repeat: no-repeat;
    		}
    		.z1{
    			background: url(img/psd2464_0017_花.png);
    			width: 5.75rem;
    			height:5.139678615574784rem ;
    			position: absolute;
    			background-size: contain;
    			left: 7rem;
    			top:13rem;
    			background-repeat: no-repeat;
    			animation: m1 2s linear infinite;
    			-webkit-animation: m1 2s linear infinite;
    			}
    			@-webkit-keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z2{
    				background: url(img/psd2464_0015_开.png);
    				width: 4.515822784810127rem;
    				height:4.101359703337454rem;
    				position: absolute;
    				background-size: contain;
    				left: 10rem;
    				top: 18rem;
    				background-repeat: no-repeat;
    				animation: m2 2s linear infinite;
    			-webkit-animation: m2 2s linear infinite;
    				
    			}
    			@-webkit-keyframes m2{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes m2{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z3{
    				background: url(img/psd2464_0014_富.png);
    				width: 3.120253164556962rem;
    				height: 2.891223733003708rem;
    				position: absolute;
    				background-size: contain;
    				left: 8rem;
    				top: 22rem;
    				background-repeat: no-repeat;
    				animation: m3 2s linear infinite;
    			-webkit-animation: m3 2s linear infinite;
    			}
    			@-webkit-keyframes m3{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m3{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z4{
    				background: url(img/psd2464_0013_贵.png);
    				width: 4.417721518987342rem;
    				height: 5.017305315203956rem;
    				position: absolute;
    				background-size: contain;
    				left: 9rem;
    				top: 25rem;
    				background-repeat: no-repeat;
    				animation: m4 2s linear infinite;
    			-webkit-animation: m4 2s linear infinite;
    				}
    				@-webkit-keyframes m4{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m4{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z5{
    				background: url(img/psd2464_0018_图层-46.png);
    				width: 5.531645569620253rem;
    				height:3.07540173053152rem;
    				position: absolute;
    				background-size: contain;
    				left: 10rem;
    				top: 14rem;
    				background-repeat: no-repeat;
    				
    				}
    				.z6{
    					background: url(img/psd2464_0020_图层-45.png);
    				width: 5.575949367088608rem;
    				height:3.470951792336218rem;
    				position: absolute;
    				background-size: contain;
    				left: 6rem;
    				top: 27rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z7{
    				background: url(img/psd2464_0004_图层-52.png);
    				width: 3.455696202531646rem;
    				height:3.07540173053152rem;
    				position: absolute;
    				background-size: contain;
    				left: 4rem;
    				top: 21rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z8{
    					background:url(img/psd2464_0003_-.png);
    					width: 3.25rem;
    				height:2.8776266996291718rem;
    				position: absolute;
    				background-size: contain;
    				left: 4rem;
    				top: 21rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z9{
    					background: url(img/psd2464_0022_图层-35.png);
    					width: 22rem;
    				height:7rem;
    				position: absolute;
    				background-size: contain;
    				left: 11rem;
    				top: 33rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z10{
    					background:url(img/psd2464_0005_图层-51.png);
    					width: 25.00632911392405rem;
    				height:15.6761433868974rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 0;
    				left: 6rem;
    				
    				margin: auto;
    				background-repeat: no-repeat;
    				}
    				.z11{
    					background: url(img/psd2464_0010_图层-48.png);
    					width: 0.9018987341772152rem;
    				height:6.650185414091471rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 9rem;
    				left: 2.5rem;
    				background-repeat: no-repeat;
    				}
    				.z12{
    					background: url(img/psd2464_0000_图层-8-副本-5.png);
    					width: 2.484177215189873rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 9rem;
    				left: 4rem;
    				background-repeat: no-repeat;
    				animation: x 2s linear infinite;
    				}
    				@keyframes x{
    					from{transform: translate(10px,10px);}
    					to{transform: translate(-10px,-10px);}
    				}
    				.z13{
    					background: url(img/psd2464_0001_-.png);
    					width: 2.515822784810127rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 15rem;
    				left: 6rem;
    				background-repeat: no-repeat;
    				animation: x1 2s linear infinite;
    				}
    				@keyframes x1{
    					from{transform: translate(-10px,-10px);}
    					to{transform: translate(10px,10px);}
    				}
    				.z14{
    					background: url(img/psd2464_0002_-.png);
    					width:2.689873417721519rem;
    				height:2.027194066749073rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 15rem;
    				right: 6rem;
    				background-repeat: no-repeat;
    				animation: x6 2s linear infinite;
    				animation: x7 2 linear infinite;
    				
    				
    				}
    				@keyframes x6{
    					from{transform: rotate(0deg);}
    					to{transform: rotate(360deg);}
    				}
    				@keyframes x7{
    					from{transform:translate(50px,10px)}
    					to{transform:translate();}
    				}
    				
    				
    				
    				.z16{
    					background: url(img/psd2464_0001_-.png);
    					width: 2.515822784810127rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 12rem;
    				right: 6rem;
    				background-repeat: no-repeat;
    				animation:x3 2s linear infinite;
    				}
    				@keyframes x3{
    					from{transform: translate();}
    					to{transform: translate(-100px,-10px);}
    				}
    				.p-2{
    					background:url(img/psd2464_0006_图层-54.png),url(img/psd2464_0004_1.png);url(img/psd2464_0006_图层-1-副本.png);
    					background-size: contain;
    					height: 100%;
    					width: 100%;
    					animation: pa2 3s;
    					}

					@keyframes pa2{
						from{
						margin-left: 30rem;
					}
					to{
					margin-left: 0rem;
						}	
					}
    				#p1{
    					background: url(img/psd2464_0001_1.png);
    				width: 9.104430379746835rem;
    				height:10.071693448702101rem;
    				position: absolute;
    				background-size: contain;
    				bottom:7rem;
    				left:0;
    				right: 0;
    				margin: auto;
    				background-repeat: no-repeat;
    				
    				}
    				
    				#p2{
    					background: url(img/psd2464_0002_图层-23.png),url(img/psd2464_0000s_0001_text1.png),url(img/psd2464_0000s_0003_英文1.png);
    				width: 20.75949367088608rem;
    				height:15.10506798516687rem;
    				position: absolute;
    				background-size: contain;
    				bottom:5rem;
    				
    				right: 4rem;
    				margin: auto;
    				background-repeat: no-repeat;
    				
    				}
    				
    				#p3{
    				background: url(img/psd2464_0003_图层-7.png);
    				width: 12.29430379746835rem;
    				height:9.629171817058096rem;
    				position: absolute;
    				background-size: contain;
    				top:4rem;
    				left:0;
    				background-repeat: no-repeat;
    				
    				
    				}
    				#p4{
    					background:url(img/psd2464_0000s_0000_祥云1.png);
    					width: 12.62658227848101rem;
    				height:8.442521631644005rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 4rem;
    				
    				right: 3.5rem;
    				margin: auto;
    				background-repeat: no-repeat;
    				}
    				#p5{
    					background:url(img/psd2464_0000_2015.png);
    					width:12.05696202531646rem;
    					height:4.622991347342398rem;
    					position: absolute;
    					background-size: contain;
    					top: 0;
    					bottom:0;
    					left: 0;;
    					right: 0;
    					margin: auto;
    					background-repeat: no-repeat;
    					
    				}
    				#p6{
    					width: 25.2rem;
						font-family: "微软雅黑";
						font-size: 1.4rem;
						color: dimgray;
						position: relative;
						top: 25vh;
						left: 0;
						right: 0;
						margin: auto;
						text-align: left;
    				    }
    				    #p7{
    				    	background: url(img/psd2464_0002_-.png);
    				    	width:2.689873417721519rem;
    					height:2.027194066749073rem;
    					position: absolute;
    					background-size: contain;
    					top: 7rem;
    					
    					left:6rem;;
    					
    					margin: auto;
    					background-repeat: no-repeat;
    					animation: ping 4s linear alternate;
    				    	
    				    }
    				    @keyframes ping{
    				    	from{transform: translate(100px,200px);}
    				    	to{transform: translate(10px,10px);}
    				    }
    				    #v {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							z-index: 5;
							display: none;
							margin: auto;}
						.p-3{
								background:url(img/psd2464_0006_图层-1-副本.png);
								background-size: contain;
    							height: 100%;
    							width: 100%;
							}#v2{
								background: url(img/psd2464_0003_素材CNN-sccnn.com.png);
								width:20.78739184177998rem;
    							height:60rem;
    							position: absolute;
    							background-size: contain;
    							top:0;
    							right:-15rem;
    					
    							background-repeat: no-repeat;
							}
    				   
							#v1{
								background: url(img/psd2464_0001_素材CNN-sccnn.com.png);
								width:15.82200247218789rem;
    							height:10.7753164556962rem;
    							position: absolute;
    							background-size: contain;
    							top: 0;
    							right:1rem;
    							;margin: auto;
    							background-repeat: no-repeat;
							}
							#v4{
								background: url(img/psd2464_0002_img.png);
								width:30.78739184177998rem;
    							height:20.70569620253165rem;
    							position: absolute;
    							background-size: contain;
    							top: 10rem;
    							right:-5rem;
    					
    							background-repeat: no-repeat;
							}
								#v5{
									position: absolute;
									background: url(img/psd2464_0006_素材CNN-sccnn.com.png);
									width:13.33333333333333rem;
    							height:7.927215189873418rem;
    							position: absolute;
    							background-size: contain;
    							bottom:10rem;
    							left:3rem;
    					
    							background-repeat: no-repeat;
    							animation: pp 2s linear infinite;
    							-webkit-animation:pp 2s linear infinite;
								}
								@-webkit-keyframes pp{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes pp{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.v6{
    				font-family: "隶书";
					font-size: 2.5rem;
					color: black;
					position: absolute;
					top:43rem;
					
    			}
    			#v7{
    				background: url(img/c3.png);
    				width:12.61860751694393rem;
    					height:8.10126582278481rem;
    					position: absolute;
    					background-size: contain;
    					right:2rem;
						top:43rem;
    					background-repeat: no-repeat;
    					animation: xx 3s linear infinite;
    			}
    			@keyframes xx{
    				from{transform: translate(10px,10px);}
    				    	to{transform: translate();}
    			}
					.z17{
						background: url(img/201101251542014627.png);
						width:3rem;
    					height:3rem;
    					top: 2rem;
    					right: 2rem;
    					margin: auto;
    					background-repeat: no-repeat;
    					position: absolute;
    					background-size: contain;
						
					}			
							
							
    	  </style>
</head>
<body >
	
	<div id="p-1" class="p-1">
		<canvas id="zuo" class="zuo"></canvas>
		<audio id="player" class="player" src="tu.mp3" autoplay="autoplay" loop="loop"></audio>
	<div id="hua"></div>
	<div class="z1" id="z1"></div>
	<div id="z2" class="z2"></div>
	<div class="z3"></div>
	<div class="z4"></div>
	<div class="z5"></div>
	<div class="z6"></div>
	<div class="z7"></div>
	<div class="z8"></div>
	<div class="z9"></div>
	<div class="z10" id="z10"></div>
	<div class="z11"></div>
	<div class="z12"></div>
	<div class="z13"></div>
	<div class="z14"></div>
	<div class="z15"></div>
	<div class="z16"></div>
	<div id="z17" class="z17"></div>
	</div>
		
	<div id="p-2" class="p-2" style="display: none;">
		<video id="v" width="100%" style="display: none;top: 50px;">
			<source src="bainian.webm" type="video/webm"></source>
		</video>
		<div id="p1"></div>
		<div id="p2" class="p2"></div>
		<div id="p3"></div>
		<div id="p4"></div>
		<div id="p5"></div>
		<div id="p6" style="font-size: 3rem;color: coral;font-family: '楷体';">包包祝大家新年快乐！<br />身体健康，吃嘛嘛香~！</div>
		<div id="p7"></div>
	</div>
	
	<div id="p-3" class="p-3" style="display: none;">
		<canvas id="can1"></canvas>
		<div id="v1"></div>
		<div id="v2"></div>
		<div id="v3"></div>
		<div id="v4"></div>
		<div id="v5"></div>
		<div class="v6">
			祝：妈咪，本命年快乐，身体棒棒的，越来越漂亮~！
		</div>
		<div id="v7"></div>




	</div>
</body>
</html>